.progress-bar {
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 2px;
  top: 0;
  overflow: hidden;
  background: rgba(221, 221, 221, 0.4);
}
.progress-bar::after {
  display: block;
  width: 100vw;
  height: 100%;
  transform-origin: top left;
  animation: gradcolor 5s steps(1) infinite, loadthird 1s infinite linear;
  content: " ";
}

@keyframes loadthird {
  0% {
    transform: translateX(-33.3vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

@keyframes gradcolor {
  0% {
    background: linear-gradient(
      90deg,
      rgba(232, 128, 152, 0) 0%,
      #2d8cf0 30%,
      #2d8cf0 50%,
      #2d8cf0 70%,
      rgba(232, 128, 152, 0) 100%
    );
  }
  20% {
    background: linear-gradient(
      90deg,
      rgba(132, 190, 190, 0) 0%,
      #2d8cf0 30%,
      #2d8cf0 50%,
      #2d8cf0 70%,
      rgba(132, 190, 190, 0) 100%
    );
  }
  40% {
    background: linear-gradient(
      90deg,
      rgba(233, 135, 36, 0) 0%,
      #2d8cf0 30%,
      #2d8cf0 50%,
      #2d8cf0 70%,
      rgba(233, 135, 36, 0) 100%
    );
  }
  60% {
    background: linear-gradient(
      90deg,
      rgba(175, 201, 78, 0) 0%,
      #2d8cf0 30%,
      #2d8cf0 50%,
      #2d8cf0 70%,
      rgba(175, 201, 78, 0) 100%
    );
  }
  80% {
    background: linear-gradient(
      90deg,
      rgba(98, 151, 164, 0) 0%,
      #2d8cf0 30%,
      #2d8cf0 50%,
      #2d8cf0 70%,
      rgba(98, 151, 164, 0) 100%
    );
  }
}
